<template>
    <view class="strategy-card" v-if="strategy">
        <!-- 高低点信号模板 (id=11) -->
        <template v-if="strategyId === 11">
            <view class="card-header">
                <text class="strategy-title">{{ strategy.strategyName }}</text>
                <text class="strategy-time">{{ strategy.time }}</text>
            </view>
            <view class="card-content">
                <view class="info-row">
                    <text class="info-label">信号方向</text>
                    <view class="direction-badge" :class="getDirectionClass(strategy.direction)">
                        <text class="direction-text">{{
                            getDirectionText(strategy.direction)
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">进场点位</text>
                    <view class="info-value entry-prices-container">
                        <text class="entry-price-single">{{
                            getEntryPriceText()
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">止盈点位</text>
                    <view class="info-value gain-prices-container">
                        <template v-if="getGainPricesArray().length > 1">
                            <view v-for="(price, index) in getGainPricesArray()" :key="index" class="gain-price-tag">
                                <text class="gain-price-label">TP{{ index + 1 }}</text>
                                <text class="gain-price-value">{{ price }}</text>
                            </view>
                        </template>
                        <text v-else class="gain-price-single">{{
                            getDefaultGainPricesText(strategy.gainPrices)
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">止损点位</text>
                    <text class="info-value">{{ strategy.lossPrice }}</text>
                </view>
                <view class="info-row" v-if="shouldShowGainImage">
                    <text class="info-label">订单交易图片</text>
                    <view class="view-btn gain-btn" @click="handleViewGainImage">
                        <text class="view-text">查看</text>
                    </view>
                </view>
            </view>
        </template>

        <!-- AG趋势模板 (id=15) -->
        <template v-else-if="strategyId === 15">
            <view class="card-header">
                <text class="strategy-title">{{ strategy.strategyName }}</text>
                <text class="strategy-time">{{ strategy.time }}</text>
            </view>
            <view class="card-content">
                <view class="info-row">
                    <text class="info-label">信号方向</text>
                    <view class="direction-badge" :class="getDirectionClass(strategy.direction)">
                        <text class="direction-text">{{
                            getDirectionText(strategy.direction)
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">进场点位</text>
                    <view class="info-value entry-prices-container">
                        <text class="entry-price-single">{{
                            getEntryPriceText()
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">止盈点位</text>
                    <view class="info-value gain-prices-container">
                        <template v-if="getGainPricesArray().length > 1">
                            <view v-for="(price, index) in getGainPricesArray()" :key="index" class="gain-price-tag">
                                <text class="gain-price-label">TP{{ index + 1 }}</text>
                                <text class="gain-price-value">{{ price }}</text>
                            </view>
                        </template>
                        <text v-else class="gain-price-single">{{
                            getDefaultGainPricesText(strategy.gainPrices)
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">止损点位</text>
                    <text class="info-value">{{ strategy.lossPrice }}</text>
                </view>
                <view class="info-row" v-if="shouldShowGainImage">
                    <text class="info-label">订单交易图片</text>
                    <view class="view-btn gain-btn" @click="handleViewGainImage">
                        <text class="view-text">查看</text>
                    </view>
                </view>
            </view>
        </template>

        <!-- 中长线策略趋势模板 (id=16) -->
        <template v-else-if="strategyId === 16">
            <view class="card-header">
                <text class="strategy-title">{{ strategy.strategyName }}</text>
                <text class="strategy-time">{{ strategy.time }}</text>
            </view>
            <view class="card-content">
                <view class="info-row">
                    <text class="info-label">信号方向</text>
                    <view class="direction-badge" :class="getDirectionClass(strategy.direction)">
                        <text class="direction-text">{{
                            getDirectionText(strategy.direction)
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">进场点位</text>
                    <view class="info-value entry-prices-container">
                        <text class="entry-price-single">{{
                            getEntryPriceText()
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">止盈点位</text>
                    <view class="info-value gain-prices-container">
                        <template v-if="getGainPricesArray().length > 1">
                            <view v-for="(price, index) in getGainPricesArray()" :key="index" class="gain-price-tag">
                                <text class="gain-price-label">TP{{ index + 1 }}</text>
                                <text class="gain-price-value">{{ price }}</text>
                            </view>
                        </template>
                        <text v-else class="gain-price-single">{{
                            getDefaultGainPricesText(strategy.gainPrices)
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">止损点位</text>
                    <text class="info-value">{{ strategy.lossPrice }}</text>
                </view>
                <view class="info-row" v-if="shouldShowGainImage">
                    <text class="info-label">订单交易图片</text>
                    <view class="view-btn gain-btn" @click="handleViewGainImage">
                        <text class="view-text">查看</text>
                    </view>
                </view>
            </view>
        </template>

        <!-- 波段趋势模板 (id=14) -->
        <template v-else-if="strategyId === 14">
            <view class="card-header">
                <text class="strategy-title">{{ strategy.strategyName }}</text>
            </view>
            <view class="card-content">
                <view class="info-row">
                    <text class="info-label">推送时间</text>
                    <text class="info-value">{{ strategy.time }}</text>
                </view>
                <!-- <view class="info-row">
                    <text class="info-label">信号方向</text>
                    <view class="direction-badge" :class="getDirectionClass(strategy.direction)">
                        <text class="direction-text">{{
                            getDirectionText(strategy.direction)
                            }}</text>
                    </view>
                </view> -->

                <view class="info-row">
                    <text class="info-label">推送内容</text>
                    <text class="info-value push-content" :style="{ color: strategy.operateType === 'CLOSE' ? '#ff3a3b' : '' }">{{
                        getBandPushContentByGainprices()
                        }}</text>
                </view>

                <view class="info-row" v-if="shouldShowGainImage">
                    <text class="info-label">订单交易图片</text>
                    <view class="view-btn gain-btn" @click="handleViewGainImage">
                        <text class="view-text">查看</text>
                    </view>
                </view>
            </view>
        </template>

        <!-- TV一开多平通用模板 (id=18 或 id=19) -->
        <template v-else-if="strategyId === 18 || strategyId === 19">
            <view class="card-header">
                <text class="strategy-title">{{ strategy.strategyName }}</text>
            </view>
            <view class="card-content">
                <view class="info-row">
                    <text class="info-label">推送时间</text>
                    <text class="info-value">{{ strategy.time }}</text>
                </view>
                <view class="info-row">
                    <text class="info-label">信号方向</text>
                    <view class="direction-badge" :class="getDirectionClass(strategy.direction)">
                        <text class="direction-text">{{
                            getDirectionText(strategy.direction)
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">提示价格</text>
                    <text class="info-value">{{ strategy.operateType === 'OPEN' ? strategy.openPrice : strategy.exitPrice }}</text>
                </view>
                <view class="info-row">
                    <text class="info-label">执行操作</text>
                    <text class="info-value operation-text">{{
                        getTVOperationText()
                        }}</text>
                </view>
                <view class="info-row" v-if="shouldShowGainImage">
                    <text class="info-label">订单交易图片</text>
                    <view class="view-btn gain-btn" @click="handleViewGainImage">
                        <text class="view-text">查看</text>
                    </view>
                </view>
            </view>
        </template>

        <!-- 异动策略模板 (id=13) -->
        <template v-else-if="strategyId === 13">
            <view class="card-header">
                <text class="strategy-title">{{ strategy.strategyName }}</text>
            </view>
            <view class="card-content">
                <view class="info-row">
                    <text class="info-label">预警币种</text>
                    <text class="info-value">{{ strategy.symbol }}</text>
                </view>
                <view class="info-row">
                    <text class="info-label">异动预警</text>
                    <text 
                        class="info-value alert-text" 
                        :style="{ color: strategy.operateType === 'OPEN' ? '#02c7b6' : '' }"
                    >
                        {{ getAbnormalAlertText() }}
                    </text>
                </view>
                <view class="info-row">
                    <text class="info-label">异动概率</text>
                    <text class="info-value">{{ getAbnormalProbability() }}</text>
                </view>
                <view class="info-row">
                    <text class="info-label">推送时间</text>
                    <text class="info-value">{{ strategy.time }}</text>
                </view>
            </view>
        </template>

        <!-- 策略21模板：开仓信号/止盈通知/止损通知 -->
        <template v-else-if="strategyId === 21">
            <view class="card-header strategy21-header">
                <view class="signal-type-badge" :class="getStrategy21SignalTypeClass()">
                    <text class="signal-type-text">{{ getStrategy21SignalTypeText() }}</text>
                </view>
                <text class="strategy-time">{{ strategy.time }}</text>
            </view>
            <view class="card-content">
                <!-- 开仓信号 -->
                <template v-if="strategy.operateType === 'OPEN'">
                    <view class="info-row">
                        <text class="info-label">预警币种</text>
                        <text class="info-value">{{ strategy.symbol }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">交易方向</text>
                        <view class="direction-badge" :class="getDirectionClass(strategy.direction)">
                            <text class="direction-text">{{
                                getDirectionText(strategy.direction)
                                }}</text>
                        </view>
                    </view>
                    <view class="info-row">
                        <text class="info-label">进场点位</text>
                        <view class="info-value entry-prices-container">
                            <text class="entry-price-single">{{
                                getEntryPriceText()
                                }}</text>
                        </view>
                    </view>
                    <view class="info-row">
                        <text class="info-label">止损点位</text>
                        <text class="info-value">{{ strategy.lossPrice }}</text>
                    </view>
                    <view class="strategy21-target-section">
                        <text class="info-label target-section-label">目标点位</text>
                        <view class="strategy21-target-container">
                            <template v-if="getGainPricesArray().length > 0">
                                <view v-for="(price, index) in getGainPricesArray()" :key="index" class="strategy21-target-item">
                                    <text class="target-label">TP{{ index + 1 }}</text>
                                    <text class="target-price">{{ formatTargetPrice(price) }}</text>
                                    <text class="target-percent">{{ getGainPricePercent(index) }}</text>
                                </view>
                            </template>
                            <text v-else class="gain-price-single">--</text>
                        </view>
                    </view>
                    <view class="info-row">
                        <text class="info-label">推送时间</text>
                        <text class="info-value">{{ strategy.time }}</text>
                    </view>
                </template>

                <!-- 止盈通知 -->
                <template v-else-if="strategy.operateType === 'CLOSE' && strategy.exitStatus === 'TAKE_PROFIT'">
                    <view class="info-row">
                        <text class="info-label">预警币种</text>
                        <text class="info-value">{{ strategy.symbol }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">执行操作</text>
                        <text class="info-value operation-text">{{
                            getStrategy21TakeProfitText()
                            }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">平仓点位</text>
                        <text class="info-value">{{ strategy.exitPrice }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">预警收益</text>
                        <text class="info-value" style="color: #00d4aa;">{{
                            getStrategy21ProfitText()
                            }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">预警周期</text>
                        <text class="info-value">{{ getStrategy21HoldTime() }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">推送时间</text>
                        <text class="info-value">{{ strategy.time }}</text>
                    </view>
                </template>

                <!-- 止损通知 -->
                <template v-else-if="strategy.operateType === 'CLOSE' && strategy.exitStatus === 'STOP_LOSS'">
                    <view class="info-row">
                        <text class="info-label">预警币种</text>
                        <text class="info-value">{{ strategy.symbol }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">执行操作</text>
                        <text class="info-value operation-text">触发止损</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">平仓点位</text>
                        <text class="info-value">{{ strategy.exitPrice }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">最终损益</text>
                        <text class="info-value" style="color: #ff3a3b;">{{
                            getStrategy21ProfitText()
                            }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">预警周期</text>
                        <text class="info-value">{{ getStrategy21HoldTime() }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">推送时间</text>
                        <text class="info-value">{{ strategy.time }}</text>
                    </view>
                </template>
            </view>
        </template>

        <!-- 默认模板（兜底） -->
        <template v-else>
            <view class="card-header">
                <text class="strategy-title">{{ strategy.strategyName }}</text>
                <text class="strategy-time">{{ strategy.time }}</text>
            </view>
            <view class="card-content">
                <view class="info-row">
                    <text class="info-label">信号方向</text>
                    <view class="direction-badge" :class="getDirectionClass(strategy.direction)">
                        <text class="direction-text">{{
                            getDirectionText(strategy.direction)
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">进场点位</text>
                    <view class="info-value entry-prices-container">
                        <text class="entry-price-single">{{
                            getEntryPriceText()
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">止盈范围</text>
                    <view class="info-value gain-prices-container">
                        <template v-if="getGainPricesArray().length > 1">
                            <view v-for="(price, index) in getGainPricesArray()" :key="index" class="gain-price-tag">
                                <text class="gain-price-label">TP{{ index + 1 }}</text>
                                <text class="gain-price-value">{{ price }}</text>
                            </view>
                        </template>
                        <text v-else class="gain-price-single">{{
                            getDefaultGainPricesText(strategy.gainPrices)
                            }}</text>
                    </view>
                </view>
                <view class="info-row">
                    <text class="info-label">止损点位</text>
                    <text class="info-value">{{ strategy.lossPrice }}</text>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
export default {
    name: 'StrategyCard',
    props: {
        strategyId: {
            type: [Number, String],
            default: ''
        },
        strategy: {
            type: Object,
            default: () => ({
                title: '高低点策略',
                time: '2025-08-28 23:18',
                direction: '做空',
                entryPrice: '113140.2',
                exitPrice: '112857.3',
                status: '进行中/止盈/止损',
            }),
        },
    },
    computed: {

        /**
         * 是否显示盈利截图
         * 只有满足以下条件才显示：
         * 1. isGain 严格等于 true（布尔值）
         * 2. gainUrl 存在且不为空字符串
         */
        shouldShowGainImage() {
            if (!this.strategy) {
                return false;
            }

            const isGain = this.strategy.isGain;
            const gainUrl = this.strategy.gainUrl;

            // 严格判断 isGain
            // 排除所有非布尔值 true 的情况
            if (isGain !== true) {
                return false;
            }

            // 严格判断 gainUrl
            // 1. 必须存在
            if (!gainUrl) {
                return false;
            }

            // 2. 必须是字符串
            if (typeof gainUrl !== 'string') {
                return false;
            }

            // 3. 去除空格后必须有内容
            const trimmedUrl = gainUrl.trim();
            if (trimmedUrl.length === 0) {
                return false;
            }

            // 4. 排除 "null" "undefined" 等字符串
            if (
                trimmedUrl === 'null' ||
                trimmedUrl === 'undefined' ||
                trimmedUrl === 'NULL'
            ) {
                return false;
            }

            // 5. 可选：检查是否是有效的URL格式
            if (
                !trimmedUrl.startsWith('http://') &&
                !trimmedUrl.startsWith('https://')
            ) {
                return false;
            }

            return true;
        },
    },
    methods: {
        /**
         * 获取方向样式类
         */
        getDirectionClass(direction) {
            return {
                'direction-long': direction === 'LONG',
                'direction-short': direction === 'SHORT',
            };
        },

        /**
         * 获取方向文本
         */
        getDirectionText(direction) {
            return direction === 'LONG' ? '做多' : '做空';
        },

        /**
         * 获取进场点位文本
         * 如果有两个价格，显示范围格式（如：1000-2000）
         * 如果只有一个价格，只显示该价格
         */
        getEntryPriceText() {
            if (!this.strategy) {
                return '--';
            }

            const openPrice = this.strategy.openPrice;
            const openPrice2 = this.strategy.openPrice2;

            // 确保价格是有效的数字或字符串
            const price1 = openPrice !== undefined && openPrice !== null && openPrice !== '' ? String(openPrice).trim() : null;
            const price2 = openPrice2 !== undefined && openPrice2 !== null && openPrice2 !== '' ? String(openPrice2).trim() : null;

            // 如果两个价格都存在，显示范围（确保小的在前，大的在后）
            if (price1 && price2) {
                const num1 = parseFloat(price1);
                const num2 = parseFloat(price2);
                // 确保范围格式：小的在前，大的在后
                if (!isNaN(num1) && !isNaN(num2)) {
                    return num1 <= num2 ? `${price1}-${price2}` : `${price2}-${price1}`;
                }
                return `${price1}-${price2}`;
            }

            // 如果只有一个价格，只显示该价格
            if (price1) {
                return price1;
            }

            if (price2) {
                return price2;
            }

            // 如果都没有，返回默认值
            return '--';
        },

        /**
         * 获取进场点位数组（用于标签展示）
         * 返回包含 openPrice 和 openPrice2 的数组
         */
        getEntryPricesArray() {
            if (!this.strategy) {
                return [];
            }

            const openPrice = this.strategy.openPrice;
            const openPrice2 = this.strategy.openPrice2;

            const prices = [];
            if (openPrice) {
                prices.push(openPrice);
            }
            if (openPrice2) {
                prices.push(openPrice2);
            }
            return prices;
        },

        /**
         * 获取止盈价格文本
         * gainPrices 可能是 JSON 字符串数组，需要解析
         */
        getGainPricesText(gainPrices) {
            if (!gainPrices) return '--';

            try {
                // 如果是字符串，尝试解析为数组
                const pricesArray =
                    typeof gainPrices === 'string' ? JSON.parse(gainPrices) : gainPrices;

                if (Array.isArray(pricesArray) && pricesArray.length > 0) {
                    // 返回第一个止盈价格，或者所有止盈价格用逗号分隔
                    return pricesArray.join(', ');
                }

                return gainPrices.toString();
            } catch (e) {
                console.error('解析止盈价格失败:', e);
                return gainPrices.toString();
            }
        },
        /**
         * 获取止盈价格文本（优化版）
         * 支持多个止盈价格的优雅展示
         */
        getDefaultGainPricesText(gainPrices) {
            if (!gainPrices) return '--';

            try {
                // 将字符串转换为数组
                let pricesArray = [];
                if (typeof gainPrices === 'string') {
                    // 处理可能是 JSON 字符串或逗号分隔的字符串
                    if (gainPrices.trim().startsWith('[')) {
                        pricesArray = JSON.parse(gainPrices);
                    } else {
                        pricesArray = gainPrices
                            .split(',')
                            .map((p) => p.trim())
                            .filter((p) => p);
                    }
                } else if (Array.isArray(gainPrices)) {
                    pricesArray = gainPrices;
                } else {
                    pricesArray = [gainPrices.toString()];
                }

                // 过滤空值
                pricesArray = pricesArray.filter(
                    (p) => p && p !== '' && p !== 'null' && p !== 'undefined',
                );

                if (pricesArray.length === 0) {
                    return '--';
                }

                // 如果只有一个止盈价格，直接返回
                if (pricesArray.length === 1) {
                    return pricesArray[0];
                }

                // 多个止盈价格，使用更美观的格式
                // 格式：TP1 / TP2 / TP3
                return pricesArray.join(' / ');
            } catch (e) {
                console.error('解析止盈价格失败:', e);
                return gainPrices.toString();
            }
        },

        /**
         * 获取止盈价格数组（用于标签展示）
         */
        getGainPricesArray() {
            const gainPrices = this.strategy.gainPrices;
            console.log('getGainPricesArray====', this.strategy)
            if (!gainPrices) return [];

            try {
                
                return gainPrices.split(',').map(p => p.trim()).filter(p => p);
            } catch (e) {
                console.error('解析止盈价格失败:', e);
                return [];
            }
        },

        /**
         * 获取退出状态文本
         */
        getExitStatusText(exitStatus) {
            const statusMap = {
                TAKE_PROFIT: '止盈',
                STOP_LOSS: '止损',
                MANUAL: '手动平仓',
            };
            return statusMap[exitStatus] || exitStatus || '--';
        },

        /**
         * 判断波段趋势是否有止盈价格 (gainPrices)
         */
        hasBandGainPrices() {
            if (!this.strategy) {
                return false;
            }

            const gainPrices = this.strategy.gainPrices;
            return gainPrices !== null && gainPrices !== undefined && gainPrices !== '';
        },

        /**
         * 波段趋势：根据 gainprices 获取推送内容
         * 有 gainprices（止盈）：显示 "建议马上获利卖出/买回"
         * 没有 gainprices（止盈）：显示 "建议马上买入/卖出"
         */
        getBandPushContentByGainprices() {
            if (!this.strategy) return '--';
            const { symbol, direction, openPrice, exitPrice, operateType } = this.strategy;

            const price = operateType === 'OPEN' ? openPrice : exitPrice;
            // 根据是否有止盈价格判断操作
            const action = operateType === 'OPEN'
                ? direction === 'LONG' ? '建议马上买入' : '建议马上卖出'
                : direction === 'LONG' ? '建议马上获利卖出' : '建议马上获利买回';

            return `${symbol}-USDT${action}，最新价格${price}`;
        },

        /**
         * 波段趋势：获取推送内容
         * 格式：币种-USDT建议马上买入/卖出，最新价格xxx
         * 或：币种-USDT建议马上获利卖出/买回，最新价格xxx
         */
        getBandPushContent() {
            if (!this.strategy) return '--';
            const { symbol, direction, openPrice, oper } = this.strategy;
            // 根据平仓状态判断是开仓还是平仓
            const isEntry = operateType === 'OPEN';
            const action = isEntry
                ? direction === 'LONG'
                    ? '建议马上买入'
                    : '建议马上卖出'
                : direction === 'LONG'
                    ? '建议马上获利卖出'
                    : '建议马上获利买回';

            return `${symbol}-USDT${action}，最新价格${price}`;
        },

        /**
         * TV一开多平：获取执行操作文本
         * 根据退出状态判断操作类型
         */
        getTVOperationText() {
            if (!this.strategy) return '--';

            const direction = this.strategy.direction;
            const exitStatus = this.strategy.exitStatus;
            const directionText = direction === 'LONG' ? '做多' : '做空';

            // 如果还没有退出，说明是开仓操作
            if (!exitStatus || exitStatus === '' || this.strategy.isProcessing) {
                return `现价开${directionText === '做多' ? '多' : '空'}`;
            }

            // 根据退出状态判断
            switch (exitStatus) {
                case 'TAKE_PROFIT':
                    // 可以根据 currentGainTarget 判断是第几次止盈
                    const gainCount = this.strategy.currentGainTarget || 1;
                    const totalGain = this.strategy.totalGainTarget || 2;

                    if (gainCount === 1) {
                        return '第一止盈仓位减半';
                    } else if (gainCount >= totalGain) {
                        return '第二止盈全部清仓';
                    } else {
                        return `第${gainCount}止盈`;
                    }

                case 'STOP_LOSS':
                    return '止损离场';

                case 'MANUAL':
                    return '手动平仓';

                default:
                    return exitStatus || '--';
            }
        },

        /**
         * 异动策略：获取异动预警文本
         * 格式：(暴涨/跌)预警生效 或 (暴涨/跌)提前X小时预警成功
         */
        getAbnormalAlertText() {
            const trendText = '(暴涨/跌)';
            const { operateType, holdTime, timeFormatHour} = this.strategy;

            if (operateType === 'OPEN') {
                return `${trendText}预警生效`;
            } else {
                // 判断是否有 holdTime，如果没有就显示“提前24h内预警成功”
                if (timeFormatHour) {
                    return `${trendText}提前${timeFormatHour}预警成功`;
                } else {
                    return `${trendText}提前12小时预警成功`;
                }
            }
        },

        /**
         * 异动策略：获取异动概率
         * 格式：v1 或 v1 下浮（上浮）X%
         */
        getAbnormalProbability() {
            if (!this.strategy) return '--';

            const profitRate = this.strategy.profitRate || 0;

            // 使用 v1, v2, v3 表示不同的概率级别
            // 这里简化处理，可以根据实际业务逻辑调整
            let level = 'v1';
            if (Math.abs(profitRate) > 10) {
                level = 'v3';
            } else if (Math.abs(profitRate) > 5) {
                level = 'v2';
            }

            // 如果有盈亏率，显示变化
            if (profitRate !== 0) {
                const changeText = profitRate > 0 ? '上浮' : '下浮';
                return `${level} ${changeText}${Math.abs(profitRate).toFixed(1)}%`;
            }

            return level;
        },

        /**
         * 策略21：计算止盈价格百分比
         * @param {number} index - 止盈价格索引（从0开始）
         * @returns {string} 百分比文本，如 "≈+2.1%"
         */
        getGainPricePercent(index) {
            if (!this.strategy || !this.strategy.openPrice) {
                return '';
            }

            const gainPricesArray = this.getGainPricesArray();
            if (!gainPricesArray || index >= gainPricesArray.length) {
                return '';
            }

            const openPrice = parseFloat(this.strategy.openPrice);
            const gainPrice = parseFloat(gainPricesArray[index]);

            if (isNaN(openPrice) || isNaN(gainPrice) || openPrice === 0) {
                return '';
            }

            // 使用 Math.abs 确保百分比始终为正数
            const percent = Math.abs(((gainPrice - openPrice) / openPrice) * 100);
            return `≈+${percent.toFixed(1)}%`;
        },

        /**
         * 策略21：获取止盈操作文本
         * 格式：到达第一止盈 (TP1) 或 到达第二止盈 (TP2) 等
         */
        getStrategy21TakeProfitText() {
            if (!this.strategy) return '--';

            const currentGainTarget = this.strategy.currentGainTarget || 1;
            return `到达第${this.getChineseNumber(currentGainTarget)}止盈 (TP${currentGainTarget})`;
        },

        /**
         * 策略21：获取收益文本
         * 格式：+2.1% 或 -2.3%
         */
        getStrategy21ProfitText() {
            if (!this.strategy) return '--';

            const profitRate = this.strategy.profitRate || 0;
            const sign = profitRate >= 0 ? '+' : '';
            return `${sign}${profitRate}%`;
        },

        /**
         * 策略21：获取预警周期文本
         * 格式：18小时 或 6小时
         */
        getStrategy21HoldTime() {
            if (!this.strategy) return '--';

            const timeFormatHour = this.strategy.timeFormatHour;
            if (timeFormatHour) {
                return timeFormatHour;
            }

            return '--';
        },

        /**
         * 将数字转换为中文数字（1-10）
         * @param {number} num - 数字
         * @returns {string} 中文数字
         */
        getChineseNumber(num) {
            const chineseNumbers = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
            if (num >= 1 && num <= 10) {
                return chineseNumbers[num];
            }
            return String(num);
        },

        /**
         * 格式化目标点位价格（小于1的数字最多保留4位小数）
         * @param {string|number} price - 价格
         * @returns {string} 格式化后的价格
         */
        formatTargetPrice(price) {
            if (!price) return '--';

            const numPrice = parseFloat(price);
            if (isNaN(numPrice)) {
                return String(price);
            }

            // 如果小于1，最多保留4位小数
            if (numPrice < 1 && numPrice > 0) {
                // 保留4位小数，但去除末尾的0
                return numPrice.toFixed(4).replace(/\.?0+$/, '');
            }

            // 大于等于1的数字，保留适当的小数位（最多4位）
            // 如果小数部分超过4位，保留4位
            const strPrice = String(numPrice);
            if (strPrice.includes('.')) {
                const parts = strPrice.split('.');
                if (parts[1] && parts[1].length > 4) {
                    return numPrice.toFixed(4).replace(/\.?0+$/, '');
                }
            }

            return strPrice;
        },

        /**
         * 策略21：获取信号类型文本
         * @returns {string} 信号类型文本
         */
        getStrategy21SignalTypeText() {
            if (!this.strategy) return '';

            const operateType = this.strategy.operateType;
            const exitStatus = this.strategy.exitStatus;

            if (operateType === 'OPEN') {
                return '开仓信号';
            } else if (operateType === 'CLOSE') {
                if (exitStatus === 'TAKE_PROFIT') {
                    return '止盈通知';
                } else if (exitStatus === 'STOP_LOSS') {
                    return '止损通知';
                }
            }

            return '';
        },

        /**
         * 策略21：获取信号类型样式类
         * @returns {string} 样式类名
         */
        getStrategy21SignalTypeClass() {
            if (!this.strategy) return '';

            const operateType = this.strategy.operateType;
            const exitStatus = this.strategy.exitStatus;

            if (operateType === 'OPEN') {
                return 'signal-type-open';
            } else if (operateType === 'CLOSE') {
                if (exitStatus === 'TAKE_PROFIT') {
                    return 'signal-type-profit';
                } else if (exitStatus === 'STOP_LOSS') {
                    return 'signal-type-loss';
                }
            }

            return '';
        },

        /**
         * 查看盈利截图（策略交易图片）
         */
        handleViewGainImage() {
            if (!this.strategy.gainUrl) {
                uni.showToast({
                    title: '暂无盈利截图',
                    icon: 'none',
                });
                return;
            }

            // 使用 uni.previewImage 预览图片（只预览，不支持保存）
            uni.previewImage({
                urls: [this.strategy.gainUrl], // 图片地址数组
                current: this.strategy.gainUrl, // 当前显示的图片
                indicator: 'number', // 指示器样式：number（数字）、default（点）
                loop: false, // 是否可循环预览
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.strategy-card {
    margin: 20rpx 20rpx 16rpx 20rpx;
    // padding: 48rpx 40rpx;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.card-header {
    display: flex;
    justify-content: space-between;
    background: #f0f7f6;

    align-items: flex-start;
    margin-bottom: 30rpx;
    padding: 20rpx;

    .header-left {
        display: flex;
        flex-direction: column;
        gap: 12rpx;
        flex: 1;
    }

    // 策略21专用header布局：信号类型和时间戳水平对齐
    &.strategy21-header {
        align-items: center;
    }
}

.strategy-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    line-height: 1.2;
}

.strategy-time {
    font-size: 24rpx;
    color: #999999;
    line-height: 1.2;
}

// 策略21信号类型标识
.signal-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6rpx 16rpx;
    border-radius: 8rpx;
    font-size: 22rpx;
    font-weight: 500;
    white-space: nowrap;

    &.signal-type-open {
        background: linear-gradient(135deg, #e8f5f3 0%, #d4f0eb 100%);
        border: 1rpx solid rgba(0, 212, 170, 0.3);

        .signal-type-text {
            color: #00d4aa;
        }
    }

    &.signal-type-profit {
        background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
        border: 1rpx solid rgba(255, 165, 0, 0.3);

        .signal-type-text {
            color: #ff9500;
        }
    }

    &.signal-type-loss {
        background: linear-gradient(135deg, #ffe6e6 0%, #ffd4d4 100%);
        border: 1rpx solid rgba(255, 58, 59, 0.3);

        .signal-type-text {
            color: #ff3a3b;
        }
    }

    .signal-type-text {
        font-size: 22rpx;
        font-weight: 500;
        line-height: 1.2;
    }
}

.card-content {
    padding: 20rpx;

    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32rpx;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .info-label {
        font-size: 28rpx;
        color: #666666;
        flex-shrink: 0;
    }

    .info-value {
        font-size: 28rpx;
        color: #333333;
        font-weight: 400;
        text-align: right;

        // 推送内容样式
        &.push-content {
            color: #00d4aa;
            font-size: 24rpx;
        }

        // 执行操作样式
        &.operation-text {
            color: #ff6b00;
            font-weight: 500;
        }

        // 异动预警样式
        &.alert-text {
            color: #ff3a3b;
            font-weight: 600;
        }
    }

    // 止盈价格容器样式
    .gain-prices-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 12rpx;
        flex: 1;
        min-width: 0;
        text-align: right;

        // 单个止盈价格样式
        .gain-price-single {
            font-size: 28rpx;
            color: #333333;
            font-weight: 400;
            line-height: 1.5;
        }

        // 止盈价格标签样式
        .gain-price-tag {
            display: flex;
            align-items: center;
            gap: 8rpx;
            padding: 8rpx 16rpx;
            background: linear-gradient(135deg, #e8f5f3 0%, #f0f9f7 100%);
            border-radius: 8rpx;
            border: 1rpx solid rgba(0, 212, 170, 0.3);
            box-shadow: 0 2rpx 8rpx rgba(0, 212, 170, 0.1);
            flex-shrink: 0;
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
            }

            .gain-price-label {
                font-size: 22rpx;
                color: #00d4aa;
                font-weight: 600;
                white-space: nowrap;
            }

            .gain-price-value {
                font-size: 26rpx;
                color: #333333;
                font-weight: 500;
                white-space: nowrap;
            }
        }
    }

    // 策略21目标点位独立区域样式
    .strategy21-target-section {
        display: flex;
        flex-direction: column;
        margin-bottom: 32rpx;

        .target-section-label {
            font-size: 28rpx;
            color: #666666;
            margin-bottom: 16rpx;
        }
    }

    // 策略21目标点位容器样式（横向排列，一行多个）
    .strategy21-target-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10rpx;
        width: 100%;

        .strategy21-target-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10rpx 14rpx;
            background: linear-gradient(135deg, #f8fdfc 0%, #f0f9f7 100%);
            border-radius: 8rpx;
            border: 1rpx solid rgba(0, 212, 170, 0.25);
            box-shadow: 0 2rpx 6rpx rgba(0, 212, 170, 0.08);
            min-width: 120rpx;
            transition: all 0.2s ease;

            .target-label {
                font-size: 22rpx;
                color: #00d4aa;
                font-weight: 600;
                line-height: 1.2;
                margin-bottom: 4rpx;
            }

            .target-price {
                font-size: 26rpx;
                color: #333333;
                font-weight: 600;
                line-height: 1.3;
                margin-bottom: 2rpx;
            }

            .target-percent {
                font-size: 20rpx;
                color: #00d4aa;
                font-weight: 500;
                line-height: 1.2;
            }
        }
    }

    // 进场点位容器样式
    .entry-prices-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 12rpx;
        flex: 1;
        min-width: 0;
        text-align: right;

        // 单个进场点位样式
        .entry-price-single {
            font-size: 28rpx;
            color: #333333;
            font-weight: 400;
            line-height: 1.5;
        }

        // 进场点位标签样式
        .entry-price-tag {
            display: flex;
            align-items: center;
            gap: 8rpx;
            padding: 8rpx 16rpx;
            background: linear-gradient(135deg, #fff4e6 0%, #fff9f0 100%);
            border-radius: 8rpx;
            border: 1rpx solid rgba(255, 107, 0, 0.3);
            box-shadow: 0 2rpx 8rpx rgba(255, 107, 0, 0.1);
            flex-shrink: 0;
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
            }

            .entry-price-label {
                font-size: 22rpx;
                color: #ff6b00;
                font-weight: 600;
                white-space: nowrap;
            }

            .entry-price-value {
                font-size: 26rpx;
                color: #333333;
                font-weight: 500;
                white-space: nowrap;
            }
        }
    }

    .direction-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        // padding: 12rpx 32rpx;
        border-radius: 12rpx;
        width: 80rpx;
        height: 44rpx;

        &.direction-long {
            background: #00d4aa;

            .direction-text {
                color: #ffffff;
            }
        }

        &.direction-short {
            background: #ff3a3b;

            .direction-text {
                color: #ffffff;
            }
        }

        .direction-text {
            font-size: 24rpx;
            font-weight: 500;
        }
    }

    .view-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        height: 48rpx;
        background: #06cbb6;
        border-radius: 12rpx;
        transition: all 0.3s ease;

        &:active {
            opacity: 0.8;
            transform: scale(0.95);
        }

        .view-text {
            font-size: 24rpx;
            color: #ffffff;
            font-weight: 500;
        }

        // 盈利截图按钮特殊样式
        &.gain-btn {
            background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
            box-shadow: 0 4rpx 12rpx rgba(255, 165, 0, 0.3);
        }
    }
}
</style>
